/*playerControl*/

#sliderAll {
  height: 60px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: #000000;
}

#sliderControlPanel {
  height: 40px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 0;
  background-image: url("../assets/skin/controlBg.png");
  background-repeat: repeat-x;
  opacity: 0.7;
  z-index: 100;
}

#playButton {
  position: absolute;
  left: 10px;
  top: 4px;
  z-index: 5;
  width: 29px;
  height: 29px;
  background-image: url("../assets/skin/buttons.png");
  background-position: -10px -10px;
  display: none;
}

#playButton:hover {
  background-position: -10px -10px;
}

#pauseButton {
  position: absolute;
  left: 10px;
  top: 3px;
  z-index: 5;
  width: 29px;
  height: 29px;
  background-image: url("../assets/skin/buttons.png");
  background-position: -10px -80px;
}

#pauseButton:hover {
  background-position: -10px -80px;
}

#nextChapter {
  position: absolute;
  left: 47px;
  top: 4px;
  z-index: 5;
  width: 29px;
  height: 29px;
  background-image: url("../assets/skin/buttons.png");
  background-position: -10px -47px;
}

#videoSliderPanel {
  width: calc(100% - 210px);
  height: 15px;
  top: 10px;
  left: 60px;
  position: absolute;
}

#sliderBackground {
  position: absolute;
  width: 100%;
  height: 5px;
  background: #fcfcfc;
  top: 8px;
  left: 0px;
  border-radius: 10px;
}

#sliderProgress {
  position: absolute;
  width: 0px;
  height: 5px;
  top: 0px;
  left: 0px;
  background: #148dff;
  background: linear-gradient(to right, #148dff, #0cd8fc);
  border-radius: 10px;
}

#sliderText {
  position: absolute;
  width: 50px;
  height: 12px;
  background-color: gray;
  color: white;
  top: -15px;
  left: -5px;
  font-size: 10px;
  line-height: 12px;
  display: none;
}

#sliderBall {
  width: 26px;
  height: 25px;
  background-image: url("../assets/skin/sliderBall.png");
  top: -10px;
  left: -12px;
  position: absolute;
}

#sliderBackground:hover {
  top: 5px;
  height: 10px;
}

#sliderBackground:hover #sliderProgress {
  height: 10px;
  border-radius: 10px;
}

#sliderBackground:hover #sliderBall {
  top: -8px;
}

#timeLabel {
  width: 140px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 0px;
  z-index: 5;
}

#currentTimeLabel {
  width: 150px;
  float: left;
  margin-left: 10px;
  color: #ffffff;
  font-size: 13px;
}

#videoFull {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 5;
  width: 25px;
  height: 25px;
  background-image: url("../assets/skin/buttons.png");
  background-position: -10px -190px;
}

#soundPanel {
  position: absolute;
  right: 40px;
  bottom: 0px;
  height: 100px;
  width: 30px;
  z-index: 2;
}

#soundButton {
  position: absolute;
  right: 0px;
  bottom: 5px;
  z-index: 5;
  width: 29px;
  height: 29px;
  background-image: url("../assets/skin/buttons.png");
  background-position: -10px -151px;
  display: none;
}

#muteButton {
  position: absolute;
  right: 0px;
  bottom: 5px;
  z-index: 5;
  width: 29px;
  height: 29px;
  background-image: url("../assets/skin/buttons.png");
  background-position: -10px -115px;
}

#soundBackground {
  position: absolute;
  right: 0px;
  bottom: 25px;
  height: 100px;
  width: 30px;
  background: black;
  display: none;
}

#soundBallProgress {
  position: absolute;
  width: 5px;
  height: 75px;
  right: 12px;
  bottom: 10px;
  background: #148dff;
  background: linear-gradient(to top, #148dff, #0cd8fc);
  border-radius: 10px;
}

#soundBall {
  width: 26px;
  height: 25px;
  background-image: url("../assets/skin/sliderBall.png");
  top: 37px;
  right: 1px;
  position: absolute;
}

#playRateBorder {
  position: absolute;
  right: 80px;
  bottom: 0px;
  z-index: 5;
  width: 40px;
  height: 49px;
  z-index: 100;
  display: none;
  cursor: pointer;
}

.playRate {
  position: absolute;
  text-align: center;
  color: white;
  bottom: 0px;
  left: 0px;
  width: 40px;
  height: 24px;
  font-size: 16px;
}

.playRateList {
  list-style: none;
  position: absolute;
  bottom: 20px;
  left: 0px;
  width: 45px;
  background: white;
  padding: 0px;
  display: none;
}

.playRateListForLi {
  height: 25px;
  background: white;
  text-align: center;
  line-height: 25px;
}
.playRateListForLi:hover {
  background: gray;
}
.listSelected {
  background: #c0c0c0;
}
